<!-- 中压用户数据查询 -->
<template>
  <div class="container">
    <el-row class="main">
      <el-col :span="5" class="tree">
        <Tree @getCheckedKeys="getCheckedKeys"></Tree>
      </el-col>
      <!-- 分隔线 -->
      <el-col :span="1" class="line">
        <el-divider direction="vertical"></el-divider>
      </el-col>
      <el-col :span="18" class="table">
        <Table :dwbm="array"></Table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// 相对路径
import Tree from "./modules/Tree";
import Table from "./modules/Table";
export default {
  data() {
    return {
      array: []
    };
  },
  //局部挂载组件
  components: {
    Tree,
    Table
  },
  created() {},
  mounted() {},
  methods: {
    getCheckedKeys(arr) {
      this.array = [];
      console.log(arr, "传送的数据");
      for (var i = 0; i < arr.length; i++) {
        var item = arr[i].id;
        if (item != null) {
          this.array.push(item);
        }
      }
      console.log(this.array, "数组");
    }
  }
};
</script>
<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  padding: 5px 10px;
}
.main {
  height: 100%;
  // 树形组件
  .tree {
    height: 100%;
    background-color: skyblue;
  }
  //分割线
  .line {
    height: 100%;
    background-color: #fff;
    text-align: center;
    .el-divider--vertical {
      height: 100%;
    }
  }
  //表格
  .table {
    height: 100%;
  }
}
</style>
